<template>
    <!-- <div> -->
        <!-- <h1>这是hello world</h1>
        <h2>{{name}}</h2> -->
       <!-- <h1>{{ hobby }}</h1> -->
        <!-- <h1 @click="change">{{ hobby }}</h1> 

        <hr/> -->
        <!-- <h4>{{ msg1 }}</h4>
        <h4>{{ msg2 }}</h4> -->
    <!-- </div> -->

    <div class="hello">
        <h1>{{ text }}</h1>
        <h3>{{ res }}</h3>
        <h4 @click="change">{{ res }}</h4>

    </div>
</template>

<script>
export default {
    // data() {
    //     return {
    //         name: "小onion",
    //         hobby: this.msg,
    //     };
    // },
    // // 使用props接收父组件的数据
    // props: {
    //     // msg1:String,
    //     // msg2:Number
    //     msg:{
    //         type:String,
    //         required:true,
    //         default:'你好曦六',
    //     }
    // },
    // // props:["msg","transmit"],
    // methods: {
    //     change() {
    //         this.hobby = "香蕉";
    //     },
    // },

    // // 周期函数，意味着，数据，DOM犯法都完成可用---DOM是真实的DOM
    // mounted() {
    //     console.log(typeof this.msg);
    //     this.msg=8888;
    //     // console.log(typeof this.msg2);
    //     // this.transmit(this.name);
    // },
    name:'HelloWorld',
    data(){
        return {
            text:"这是HelloWorld组件",
            res:this.msg,
        }
    },
    props:{
        msg:{
             type:String,
            required:true,
             default:'你好曦六',
         },
    },
    methods:{
        change(){
            this.res=999;
        }
    },
    mounted(){},
};
</script>